﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="获取ListBox选中多项值及二级联动.aspx.cs" Inherits="ProjectStudy.WebForm1"  EnableEventValidation="false"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {

            getProvince();

            $("#ListBox3").append("<option>请选择省份</option>");

            $("#ListBox2").change(function () {

                $("#ListBox3").empty();
                var province = $("#<%= ListBox2.ClientID %> option:selected").text();
                
                $.getJSON("../Ajax/绑定listbox.ashx", { action: "GetCity", provincename: province }, function (data) {
                    if (data != null || data != undefined) {

                        if (data.length > 0) {
                            //alert(data[0].ProvinceName);
                            for (var i = 0; i < data.length; i++) {
                                //alert(data[i].ProvinceName);
                                $("#ListBox3").append("<option value='" + data[i].CityName + "'>" + data[i].CityName + "</option>");
                            }
                        }
                    }
                })
                
            });
        });

        function getProvince() { //Ajax获得对应下拉框值           
            $("#ListBox2").empty();

            $.getJSON("../Ajax/绑定listbox.ashx", { action: "GetProvince" }, function (data) {
                if (data != null || data != undefined) {

                    if (data.length > 0) {
                        //alert(data[0].ProvinceName);
                        for (var i = 0; i < data.length; i++) {
                            //alert(data[i].ProvinceName);
                            $("#ListBox2").append("<option value='"+data[i].ProvinceName+"'>"+data[i].ProvinceName+"</option>");                            
                        }
                    }
                }
            })           
        }
    </script>


</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ListBox ID="ListBox1" runat="server" Height="35px" SelectionMode="Multiple" >
            <asp:ListItem Value="HeNan">河南</asp:ListItem>
            <asp:ListItem Value="HeBei">河北</asp:ListItem>
            <asp:ListItem Value="ShangHai">上海</asp:ListItem>
            <asp:ListItem Value="BeiJing">北京</asp:ListItem>
        </asp:ListBox>
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" Text="获取" onclick="Button1_Click" />
        <br />
        <br />
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
        <br />
        <br />
        <asp:ListBox ID="ListBox2" runat="server"></asp:ListBox>
    &nbsp;
        <asp:ListBox ID="ListBox3" runat="server"></asp:ListBox>
    </div>
    </form>
</body>
</html>
